<template>
  <view class="signUp">
	<view class="onePage"></view>
    <view class="twoPage" id="twoPage">
		<view class="twoPageBoxborder">
			<view class="twoPageBox" id="register">
				<h3>Register by email</h3>
				<view class="loginbox">
					<view class="forms">
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
							<el-form-item prop="email" >
								<el-input type="email" v-model="ruleForm.email" placeholder="Email address" 
							@change="isValue" @keyup.native="isBlur"></el-input>
								<span class="cursor-blink" v-if="isCursor"></span>
							</el-form-item>
							
							<el-form-item prop="login_password">
								<el-input placeholder="Password" v-model="ruleForm.login_password" show-password></el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-show="false" v-model="ruleForm.inviter_code"></el-input>
								<el-button type="primary" class="submit" @click="submitForm('ruleForm')">Log in / Sign Up</el-button>
								<!-- <div class="google">
									<div id="signInDiv" class="google-button">Google login</div>
								</div> -->
							</el-form-item>
						</el-form>
					</view>
				</view>
			</view>
		</view>
		
	</view>
	<view class="threePage">
	</view>
	<view class="GetStar">
		<view class="GetStarImg"></view>
		<dl>
			<dt>Get Chat</dt>
			<dd>
				<el-button type="primary" class="submit" @click="reCommunity()">Community<i></i></el-button>
				<el-button type="primary" class="submit" @click="togglePosition">Register<i></i></el-button>
			</dd>
		</dl>
	</view>
  </view>
</template>

<script>
import generateID from '@/utils/generateID'
import { setToken } from '@/utils/auth'
import md5 from 'js-md5'
import regionData from '../static/json/region.json'
import cookie from 'js-cookie'

export default {
	name: 'signUp',
	data() {
		var validatePass = (rule, value, callback) => {
			if (value) {
				let z_reg = /((?=.*[a-z])(?=.*\d)|(?=[a-z])(?=.*[#@!~%^&*])|(?=.*\d)(?=.*[#@!~%^&*]))[a-z\d#@!~%^&*]{6,12}/i
				if (z_reg.test(value)) {
				  callback()
				} else {
				  callback(this.$t('resetPwd.pwdVail'))
				}
			}
		}
		return {
			ruleForm: {
				email: '',
				login_password: null,
				inviter_code: ''
			},
			region: '',
			regionList: regionData,
			rules: {
				email: [
					{
						required: true,
						message: this.$t('register.valid.email'),
						trigger: 'blur'
					}
				],
				login_password: [
					{
						required: true,
						message: this.$t('register.valid.pwd'),
						trigger: 'blur'
					},
					{ required: true, validator: validatePass , trigger: "blur" }
				]
			},
			captchaPoup: null,
			timer: null,
			show: true,
			count: '',
			active: 'email',
			mdf: 't',
			isCursor:true,//假光标是否显示
		}
	},

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let ruleFormNew = {}
			ruleFormNew = {
			email: this.ruleForm.email,
			login_password: md5(this.ruleForm.login_password).toUpperCase(),
			inviter_code: this.ruleForm.inviter_code && this.ruleForm.inviter_code != '' ? this.ruleForm.inviter_code : undefined
			}
		  this.$api.register.regOrLogin(ruleFormNew).then((res) => {
		    if (res.code == '200') {
		      let data = JSON.parse(res.data)
		      console.log(data.token);
		      setToken(data.token)
		      localStorage.setItem('user', res.data)
		      this.$router.push('/pages/home/index')
		    } else {
		      this.$message.error(res.msg)
		    }
		  })
        } else {
          return false
        }
      })
    },
	reCommunity() {
		window.open('https://t.me/+bcWH-rKOpk82NzM1', '_blank');  
	},
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    /**
     * Countdown for obtaining verification code
     */
    countDown() {
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },
    /**
     * Obtain the email verification code
     */
    getEmailCode(validate) {
      // this.$api.register.getEmailCode()
      let jsonObj = {
        email: this.ruleForm.email,
        //NECaptchaValidate: validate,
		recaptchaToken:validate,
		sendType: 1
      }
      this.$api.register.getEmailCode(jsonObj).then((res) => {
		if (res.code == '200'){
			this.countDown();
		}else{
			if(res.hasOwnProperty('errorMsg')){
				this.$message.error(res.errorMsg);
			}else{
				this.$message.error(res.msg);
			}
		}
      })
    },
	CAptcha(){
		if(this.ruleForm.email===''||this.ruleForm.email===undefined){
			this.$message.error(this.$t('register.valid.email'))
			return false;
		}
		let that = this
		grecaptcha.render('g-recaptcha', {
		  'sitekey' : '6Lca96wmAAAAAA8zgMf4iONuu1P8ikC2_tUbQckY',
		  'callback' : function(token){
			  that.getEmailCode(token);
			  //close
			  document.getElementById('g-recaptcha').innerHTML='';
			},
		  'theme' : 'light'
		});
	},
    tabs(val) {
      this.active = val
      this.$refs['ruleForm'].clearValidate()
    },
	// google login
	async callbackLogin(response) {
		const accessToken = response.credential
		const params = {
			input_token: accessToken,
			inviter_code: this.ruleForm.inviter_code,
			login_type: 'g'
		}
		this.$api.login.registerFacebook(params).then((res) => {
			if (res.code == '200') {
				let data = JSON.parse(res.data)
				setToken(data.token)
				localStorage.setItem('user', res.data)
				this.$router.push('/pages/home/index')
				//this.$router.push('/')
			}
		})
	},
	initClient() {
		// this.client = google.accounts.id.initialize({
		// 	client_id: '139543481401-e14uo74q4572khfq5jijv9ur3np0jt9k.apps.googleusercontent.com',
		// 	callback: (response) => this.callbackLogin(response)
		// })
	},
	togglePosition(){
	  uni.createSelectorQuery().select('.twoPage').boundingClientRect(data=>{//目标位置的节点：类class或者id
		uni.createSelectorQuery().select(".signUp").boundingClientRect(res=>{//最外层盒子的节点：类class或者id
		uni.pageScrollTo({
		duration: 100,//过渡时间
		scrollTop:data.top - res.top,//到达距离顶部的top值
		//scrollTop:data.top - res.top,//如果置顶
			})
			}).exec()
		}).exec();
	},
	isBlur(){
		this.isCursor=false;
	},
	isValue(){
		this.isCursor=false;
		//console.log('this.ruleForm.email');
		if(this.ruleForm.email!=''){
			this.isCursor=false;
			//console.log(this.ruleForm.email);
		}else{
			this.isCursor=true;
		}
	}
  },
  mounted() {
	  this.isValue();
     // google login
     const googleBtnConfigs = {
     	theme: 'outline',
     	size: 'large',
     	shape: 'pill',
     	text: 'login_with',
     	width: '50',
     	locale: 'en'
     }
     google.accounts.id.prompt()
     google.accounts.id.renderButton(document.getElementById('signInDiv'), googleBtnConfigs)
  },
  created() {
	const query = this.$route.query
	this.ruleForm.inviter_code = query.invite ? query.invite : ''
	if(query.l&&query.l==='ZH'){
		this.$i18n.locale = 'ZH'
		cookie.set("lang",'ZH')
	}else{
		this.$i18n.locale = 'EN'
		cookie.set("lang",'EN')
	}
	this.initClient()
  }
}
</script>
<style lang="scss">
.signUp {
	font-family: 'Gilroy';
	position: relative;
	height: 100%;
	.onePage{
		width:100%;
		height:1624rpx;
		background:url('../static/images/signUP/onepage.jpg') no-repeat;
		background-size: 100%;
	}
	.twoPage{
		width:100%;
		height:1624rpx;
		background:url('../static/images/signUP/twopage.png') no-repeat;
		background-size: 100%;
		overflow: hidden;
		.twoPageBoxborder{
			width: 460rpx;
			height: 968rpx;
			margin:160px auto;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 58rpx;
			overflow: hidden;
			padding:20rpx;
			.twoPageBox{
				width: 460rpx;
				height:934rpx;
				margin:0 auto;
				background:url('../static/images/signUP/twopageBox.png') no-repeat ;
				background-size: 100%;
				border-radius: 58rpx;
				padding:100rpx 0;
				h3{
					font-size:40rpx;
					font-family: Frick 0.3 Regular;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 92px;
					text-align: center;
					text-transform: uppercase;
				}
			}
		}
		
	}
	.threePage{
		width:100%;
		height:1560rpx;
		background:url('../static/images/signUP/threepage.png') no-repeat;
		background-size: 100%;
		overflow: hidden;

	}
	.GetStar{
		position:fixed;
		bottom:60rpx;
		left:8%;
		width:85%;
		height: 180rpx;
		margin:0 auto;
		border-radius: 30rpx;
		background: #6D50DF;
		.GetStarImg{
			width:130rpx;
			height:130rpx;
			background:url('../static/images/signUP/logo.png') no-repeat;
			background-size: 100%;
			margin:26rpx 0 0 20rpx;
			float:left;
			margin-right:20rpx;
		}
		dl{
			float:left;
			dt{
				font-size:40rpx;
				line-height:90rpx;
				font-weight:400;
				color:#fff;
			}
			dd{
				.submit{
					float: left;
					width: 210rpx;
					height:66rpx;
					background: #FFFFFF !important;
					border-radius: 16rpx;
					padding:0;
					text-align: center;
					color:#2446CA ;
					font-size:30rpx;
					vertical-align: bottom;
					i{
						display: inline-block;
						width:32rpx;
						height:32rpx;
						background:url('../static/images/signUP/morebtn.png') no-repeat;
						background-size: 100%;
						vertical-align: middle;
						margin-left:10rpx;
					}
				}
			}
		}
	}
	.loginbox {
		width:100%;
		margin:0 auto;
		padding: 0 40rpx;
		box-sizing: border-box;
		h4 {
			font: 500 56rpx/150rpx Arial;
			text-align: center;
		}
		.login-tabs {
			display: flex;
			width: 100%;
			height: 96rpx;
			border: 1px solid #ccc;
			border-radius: 48rpx;
			margin-bottom: 6rpx;
			.item {
				flex: 1;
				width: 100%;
				height: 84rpx;
				line-height: 84rpx;
				margin: 6rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #666;
				cursor: pointer;
				&.active {
					color: #8286cf;
					border-radius: 48rpx;
					background-color: #e6e7fc;
				}
			}
		}
		
		.forms {
			margin-top:10rpx;
			
			.link {
				color: rgba(255, 255, 255, 0.5);
				font: 400 24rpx/60rpx Arial;
			}
			.submit {
				margin-top:12rpx;
				width: 100%;
				height: 100rpx !important;
				font-size:32rpx;
				font-weight:500;
				color: #6D50DF;
				border-radius:12rpx;
				background: #FFFFFF !important;
				border:0;
				font-family: PingFangSC;
			}
			/deep/ .email {
				position: relative;
				.el-input__inner {
					padding-left: 100rpx;
					background-color: transparent !important; 
				}
				
				.el-input__suffix {
					position: absolute;
					left: 30rpx;
					right: auto;
					line-height: 96rpx;
					color: #999;
				}
			}
			.cursor-blink {
				position: absolute;
				left: 13px;
				    top: 13px;
				display: inline-block;
				width: 1px;
				height:14px;
				background-color: #fff;
				animation: blink 1s infinite steps(1, start);
			}
			/*这里设置动画blink*/
			@keyframes blink {
				0%, 100% {
					background-color: #000;
					color: #fff;
				}
				50% {
					background-color: #bbb; /* not #aaa because it's seem there is Google Chrome bug */
					color: #000;
				}
			}
			.sms {
				position: relative;
				.hint {
					position: absolute;
					left: 0;
					bottom: -30rpx;
					// display: inline-block;
					font-size: 20rpx;
					color: #f56c6c;
					z-index: 999;
					height: 40rpx;
					line-height: 20rpx;
					
				}
				.el-form-item__error {
					width: 100%;
					z-index: 9999;
					background-color: #fff;
				}
			}
			/deep/ .el-input-group__append {
			  padding: 0 14rpx;
			  border:none  !important;
			  background:rgba(255, 255, 255, 0.1)  !important;
			  .el-button {
				  height: 96rpx;
				  border-radius:2rpx;
				  border: 0px solid transparent !important;
				  background-color:#1a1a1c !important;
			  }
			  .yzm{
				  height:52rpx;
				  line-height:8rpx;
				  border-radius:6rpx;
				  margin:5rpx 5rpx 0 0;
				  font-size:24rpx;
				  font-weight: bold;
				  color:#fff;
				  background:rgba(255, 255, 255, 0.1)  !important;
			  }
			}
		}
	}
}
#g-recaptcha {
	width:100%;
	div{
		width: 304px;
		height: 78px;
		margin: 135px auto;
   }
}
#g-recaptcha {
	width:100%;
	div{
		width: 304px;
		height: 78px;
		margin: 135px auto;
   }
}
.footerFont{
			//position: absolute;
			width:80%;
			margin:30rpx auto 0 auto;
			text-align: center;
			font-size:32rpx;
			line-height:60rpx;
			strong{
				font-size:44rpx;
			}
		}
.google {
	margin-top:16rpx;
	text-align: center;
	height:80rpx;
	//border:#fff solid 1px;
	//background: rgba(255,255,255,0.2);
	//border-radius: 6px;
	.google-button {
		display: inline-block;
		text-align: center;
		width:384rpx;
		height:80rpx;
		color:#fff;
	}
	#signInDiv {
		iframe {
			margin: 0 !important;
			left: calc(50% - 105px) !important;
		}
	}
	
}
@media screen and (min-width:1200px) {
    .signUp {
		.onePage{
			width: 617px;
			height: 1336px;
			margin: 0 auto;
		}
		.twoPage{
			width: 617px;
			height: 1335px;
			margin: 0 auto;
		}
		.threePage{
			width: 617px;
			margin: 0 auto;
			height: 1336px;
		}
		.GetStar{
			width: 413px;
			left: 38%;
			height: 127px;
			.GetStarImg{
				width: 88px;
				height: 88px;
			}
			dl{
				dt{
					font-size: 30px;
					line-height: 67px;
				}
				dd {
					.submit{
						width: 131px;
						height: 40px;
						border-radius: 7px;
						font-size: 18px;
					}
				}
			}
	    }
    }
}

</style>
